<!-- 系统日志 -->
<template>
  <div class="flex-1 flex-ver">
    <div class="mb8 search_box">
      <search @clearSearch='clearSearch'>
        <el-form label-width='80px' inline autocomplete="off" :model="pageparm" class="search_box">
          <el-form-item label="姓名">
            <inputSearch ref="inputSearch"  @onChange="employeesChange" />
          </el-form-item>
          <el-form-item label="工号">
            <el-input placeholder="输入工号搜索" v-model="pageparm.code" clearable />
          </el-form-item>
          <el-form-item label="日期筛选">
            <el-date-picker
              v-model="pageparm.start_time"
              type="daterange"
              range-separator="至"
              start-placeholder="日期范围"
              end-placeholder="日期范围"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              @change="searchChane($event,'start_time')">
            </el-date-picker>
          </el-form-item>
        </el-form>  
      </search>
    </div>
    <el-table
      :data="tableData"
      size="medium"
      class="flex-1"
      height="100%"
      border
      highlight-current-row
      v-loading="tableLoading"
      stripe
      @sort-change="tableSortChange"> 
      <el-table-column
        align="center"
        prop="name"
        label="操作人姓名"
        width="180"
        sortable="custom"
        >
      </el-table-column>
      <el-table-column
        align="center"
        prop="code"
        label="操作人工号"
        width="180"
        sortable="custom"
        >
      </el-table-column>
      <el-table-column
        align="center"
        prop="created_at"
        label="操作时间"
        width="200"
        sortable="custom"
        >
      </el-table-column>
      <el-table-column
        align="center"
        prop="description"
        label="操作说明"
        min-width="300"
        sortable="custom"
        >
      </el-table-column>
    </el-table>

    <Pagination
      v-bind:child-msg="pageparm"
      @callFather="callFather"
    ></Pagination>

  </div>
</template>

<script>
import {
  ApilogsSystem,
} from "@/api";
import { debounce } from "@/utils";
export default {
  data() {
    return {
      tableData: [],
      editFormVisible: false,
      pageparm: {
        page: 1,
        perPage: 20,
        total: null,
        sort_str: null,
        sort_order: "desc",
        employees_id: null,
        code: null,
      },
      tableLoading: false,

      btnLoading: false,

    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    searchChane(i,val){
      this.pageparm[val] = i
      this.pageparm.page = 1
      this.getList()
    },
    tableSortChange(column) {
      if (column.order === "descending") {
        this.pageparm.sort_str = column.prop;
        this.pageparm.sort_order = "desc";
      } else if (column.order === "ascending") {
        this.pageparm.sort_str = column.prop;
        this.pageparm.sort_order = "asc";
      }else{
        this.pageparm.sort_str = null;
        this.pageparm.sort_order = null;
      }
      this.getList();
    },
    //搜索
    clearSearch(){
      this.$refs.inputSearch.employeesList = []
      this.$refs.inputSearch.employees_id = null
    },
    employeesChange(id){
      this.pageparm.page = 1
      this.pageparm.employees_id = id
      this.getList()
    },
    //分页
    callFather(pageparm) {
      this.pageparm.page = pageparm.page;
      this.pageparm.perPage = pageparm.perPage;
      this.getList();
    },
    getList() {
      this.tableLoading = true;
      ApilogsSystem(this.pageparm).then(({ data, page }) => {
          this.tableData = data || [];
          this.pageparm.total = page.total;
          this.tableLoading = false;
        })
        .catch(() => {
          this.tableLoading = false;
        });
    },
  },
};
</script>

<style lang='less' scoped>
.dialog {
  .el-col-12 {
    width: 70%;
  }
}
</style>